<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ include file="/include/taglibs.jsp"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page isELIgnored="false" %>
<head>
  <title>温度计柱状图</title>
  <link class="codestyle" rel="prefetch alternate stylesheet" href="${ctx}/assets/admin/LingUI/highlight/styles/tomorrow.css"/>
</head>

<div class="row">
  <div class="col-xs-12">
    <div id="wdj_bar_div" class="col-lg-12" style="height: 400px"></div>
  </div>
  <div class="col-xs-12">
    <pre><code class="java">
      @RequestMapping(value = "/bar/wdj",method = RequestMethod.POST)
      @ResponseBody
      public ModelMap genWdjBarChart(){

          ModelMap modelMap = new ModelMap();

          Option option = new Option();
          option.title().text("温度计式图表");
          option.tooltip().trigger(Trigger.axis).axisPointer().type(PointerType.shadow);
          option.tooltip().formatter("function (params){" +
          "            return params[0].name + '<br/>'" +
          "                   + params[0].seriesName + ' : ' + params[0].value + '<br/>'" +
          "                   + params[1].seriesName + ' : ' + (params[1].value + params[0].value);" +
          "        }");
          option.legend("Acutal", "Forecast");
          option.toolbox().show(true).feature(Tool.mark, Tool.dataView,
          Tool.restore,
          Tool.saveAsImage);

          option.calculable(true);

          option.xAxis(new CategoryAxis().data("Cosco","CMA","APL","OOCL","Wanhai","Zim"));
          option.yAxis(new ValueAxis().boundaryGap(0, 0.1).type(AxisType.value));

          Bar bar = new Bar("Acutal");
          bar.setStack("sum");
          bar.setBarCategoryGap("50%");
          bar.itemStyle().normal().color("tomato").
          barBorderColor("tomato").barBorderWidth(6).barBorderRadius(0)
          .label().position(Position.inside).show(true);
          bar.data(260, 200, 220, 120, 100, 80);

          Bar bar2 = new Bar("Forecast");
          bar2.setStack("sum");
          bar2.itemStyle().normal().color("#fff").
          barBorderColor("tomato").barBorderWidth(6).barBorderRadius(0)
          .label().position(Position.top).show(true).formatter("function (params) {" +
          "                            for (var i = 0, l = option.xAxis[0].data.length; i < l; i++) {" +
          "                                if (option.xAxis[0].data[i] == params.name) {" +
          "                                    return option.series[0].data[i] + params.value;" +
          "                                }" +
          "                            }" +
          "                        }").textStyle().color("tomato");
          bar2.data(40, 80, 50, 80, 80, 70);
          option.series(bar, bar2);

          modelMap.addAttribute(Constants.DEFAULT_SUCCESS_KEY,Boolean.TRUE);
          modelMap.addAttribute("data", GsonUtil.format(option));

          return modelMap;
      }
    </code></pre>
  </div>
</div>
<script type="text/javascript">

  var scripts = [null,
    "${ctx}/assets/admin/LingUI/echarts/echarts-all.js",
    "${ctx}/assets/admin/LingUI/highlight/highlight.pack.js",
    null];

  ace.load_ajax_scripts(scripts, function() {

    hljs.initHighlightingOnLoad();

    $(document).ready(function() {
      $('pre code').each(function(i, block) {
        hljs.highlightBlock(block);
      });
    });

    var chart = echarts.init(document.getElementById('wdj_bar_div'));
    chart.clear();
    chart.showLoading({text: '正在努力的读取数据中...'});

    $.ajax({
      type : 'POST',
      url : '${ctx}/${frameworkPath}/charts/bar/wdj',
      traditional : true,
      dataType:'json',
      success : function(message) {
        debugger;
        if(message.success){
          chart.setOption(JSON.parse(JSON.stringify(eval('('+message.data+')'))));
          chart.hideLoading();
        }
        else{
          lui.fail('error');
        }
      }
    });
  });
</script>